<template>
  <div>
    <NavBar />
    <div class="profile">
      <header>
        <h1>个人账户</h1>
        <el-button v-if="isLoggedIn" type="danger" @click="logout">退出登录</el-button>
      </header>
      <section v-if="isLoggedIn">
        <h2>账户信息</h2>
        <div class="account-info">
          <p>用户名: <strong>{{ username }}</strong></p>
          <p>登录时间: <strong>{{ loginTime }}</strong></p>
        </div>
      </section>
      <hr>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
  components: {
    NavBar
  },
  data() {
    return {
      isLoggedIn: !!localStorage.getItem('user'),
      username: localStorage.getItem('username') || '',
      loginTime: '' // 新增字段用于存储登录时间
    };
  },
  created() {
    if (this.isLoggedIn) {
      const now = new Date();
      this.loginTime = now.toLocaleString(); // 设置当前时间为登录时间
      localStorage.setItem('loginTime', this.loginTime); // 将登录时间存储到 localStorage
    }
  },
  methods: {
    logout() {
      localStorage.removeItem('user');
      localStorage.removeItem('username');
      localStorage.removeItem('loginTime'); // 移除登录时间
      this.isLoggedIn = false;
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.profile {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 20px; /* 添加顶部间距 */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

.profile h1, .profile h2 {
  text-align: center;
  color: #282930;
}

.profile h1 {
  font-size: 24px;
}

.profile h2 {
  font-size: 20px;
}

.account-info {
  background: #fff;
  border: 1px solid #eaeaea;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.account-info strong {
  color: #333;
}

/* 删除了 .links-section 和 .links-container 相关的样式 */
/* 删除了 .link-item 相关的样式 */

/* 响应式设计 */
@media (max-width: 768px) {
  .profile {
    padding: 10px;
  }
}
</style>